
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor-1-4-3-3/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor-1-4-3-3/ueditor.all.js"></script>

<style>
    .form-control-static{
        color: #b3b3b3;
    }
    .form-control-static:hover{
        color: #000;
    }
</style>

<form class="form-horizontal form" role="form" action="{:U('Goods/update')}" method="POST">
    <div class="form-group">
    <label class="col-sm-2 control-label" for="category">类目：</label>
    <div class=" col-sm-6">
        <select class="form-control" id="category" name="category_id">
            <option value="">请选择类目</option>
            <volist name="categorys" id="category">
                <option value="{$category['id']}" <eq name="info.category_id" value="$category['id']">selected=selected</eq> >
                <for start="1" end="$category['depth']">
                    <if condition="($i+1) eq $category['depth']">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <else/>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </if>
                </for>
                {$category.title}</option>
            </volist>
        </select>    </div>
</div>
    <div class="form-group">
        <label class="col-sm-2 control-label">商品类型：</label>
        <div class=" col-sm-6">
            <label class="checkbox-inline">
                <input type="radio" name="is_new" id="is_new1" value="1" <if condition="isset($info['is_new']) &&  ($info['is_new'] eq '1')">checked</if>>全新
            </label>
            <label class="checkbox-inline">
                <input type="radio" name="is_new" id="is_new2" value="0" <if condition="isset($info['is_new']) &&  ($info['is_new'] eq '0')">checked</if>>二手
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="title">商品标题：</label>
        <div class=" col-sm-6">
            <input id="title" name="title" type="text" class="form-control" placeholder="" value='<if condition="isset($info['title'])">{$info.title}</if>'>
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">30字以内</p>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-2 control-label" for="multimage">推荐位：</label>
        <div class=" col-sm-6 ">


            <div id="focusUpload">

                <ul id="focusTab" class="nav nav-tabs">
                    <li class="active"><a href="#focustab1" data-toggle="tab">推荐位</a></li>
                    <li><a href="#focustab2" data-toggle="tab">图片上传</a></li>
                    <!--<li><a href="#multimagetab2" data-toggle="tab">图片空间</a></li>-->
                </ul>
                <div id="focusTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="focustab1">
                        <volist name=":C('GOODS_POSITION')" id="position">
                            <label class="checkbox-inline"><input type="checkbox" value="{$key}" name="position[]" <if condition="check_position($info['position'],$key)">checked="checked"</if>>{$position}</label>
                        </volist>
                        <input hidden="hidden" type="checkbox" checked="checked" value="0" name="position[]" >
                    </div>
                    <div class="tab-pane fade" id="focustab2">
                        <div class="form-group">
                            <div class="center">
                                <input id="focus" type="file" style="display:inline;" accept="image/gif, image/jpeg, image/png" >
                                <input name="focus" type="text" style="display:inline;display:none;" value="<if condition="isset($info['focus'])">{$info.focus}</if>">
                            </div>

                            <div class="center">
                                <p class="form-control-static">提示：本地上传图片大小不能超过3M。</p>
                                <p class="form-control-static">注意：图片顺序与推荐位一一对应。</p>
                            </div>
                        </div>

                        <div class="focus-gallery">
                            <!--<p class="form-control-static">700*700 以上的图片可以在商品详情页主图提供图片放大功能</p>-->
                            <ul class="nav">
                                <volist name=":C('GOODS_POSITION')" id="position">
                                    <li class="<eq name="i" value="1">primary</eq> <if condition="(isset($info['focus_images'][$i-1]['path']) && (strlen($info['focus_images'][$i-1]['path']) gt 5))" >has-img" data-img="{$info['focus_images'][$i-1]['id']}"<else />" data-img="{$info['focus_images'][$i-1]['id']}"</if> data-index="{$i}" >
                                        <div class="preview">
                                            <img src="<if condition="isset($info['focus_images'][$i-1]['path'])">{$info['focus_images'][$i-1]['path']}</if>"/>
                                        </div>
                                        <div class="operate">
                                            <i class="m-left fa fa-chevron-left" title="左移"></i>
                                            <i class="m-right fa fa-chevron-right" title="右移"></i>
                                            <i class="remove fa fa-remove" title="删除"></i>
                                        </div>
                                    </li>
                                </volist>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <script type="application/javascript">
                $(function(){
                    /**
                     * 商品图片上传
                     */
                    $("#focus").uploadify({
                        'swf'      : '/static/plugin/uploadify/uploadify.swf',
                        'uploader' : '{:U("Picture/upload")}',
                        "buttonText"      : "上传图片",
                        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                        "onUploadSuccess" :uploadPicture_focus
                        // Put your options here
                    });
                    function uploadPicture_focus(file,data){
                        trace('上传成功');
                        var data = $.parseJSON(data);
                        trace(data);
                        if(data.status){
                            trace('上传成功');
                            var pics = $(".focus-gallery ul li");
                            trace('共'+pics.length+'个图片容器');
                            for(var i=0; i<pics.length; i++){
                                if($(pics[i]).attr('data-img') == data.id){
                                    trace('已存在图片');
                                    return;
                                }
                            }
                            for(var i=0; i<pics.length; i++){
                                var img = $(pics[i]).find('div.preview').find('img');
                                var src = $(img).attr('src');
                                if(src.length<10){
                                    trace('第'+i+'图片容器增加src');
                                    trace(img);
                                    $(img).attr('src',data.path);
                                    $(pics[i]).attr('data-img',data.id);
                                    checkImg_focus(pics[i]);
                                    break;
                                }else{
                                    trace('第'+i+'图片容器有src='+src);
                                }
                            }
                        }else{
                            trace('上传失败');
                        }
                    }

                    //删除
                    $(document).on('click','.remove',function(){
                        var li = $(this).parent('.operate').parent('li');
                        $(li).find('div.preview').find('img').attr('src','');
                        $(li).attr('data-img','');
                        checkImg_focus(li);
                    });
                    function checkImg_focus(li){
                        var src = $(li).find('div.preview').find('img').attr('src');
                        if(src.length>10){
                            $(li).addClass('has-img');
                        }else{
                            $(li).removeClass('has-img');
                        }
                        var pics = $(".focus-gallery ul li");
                        var val = '';
                        for(var i=0; i<pics.length; i++){
                            if($(pics[i]).attr('data-img')>=1){
                                val = val + $(pics[i]).attr('data-img')+ ',';
                            }
                        }

                        $("input[name='focus']").val(val);
                        trace('focus = '+$("input[name='focus']").val());
                    }
                });
            </script>


        </div>

        <div class="col-sm-2">
            <p class="form-control-static"></p>
        </div>
    </div>
    <!--<div class="form-group">-->
        <!--<label class="col-sm-2 control-label" >活动：</label>-->
        <!--<div class=" col-sm-6">-->

            <!--<volist name=":C('ACTIVITY')" id="activity">-->
                <!--<label class="checkbox-inline" style="margin-bottom:10px;"><input type="checkbox" value="{$key}" name="activity[]" <if condition="check_activity($info['activity'],$key)">checked="checked"</if>>{$activity}</label>-->
            <!--</volist>-->
            <!--<input hidden="hidden" type="checkbox" checked="checked" value="0" name="activity[]" >-->
            <!--<div class="row">-->
                <!--<volist name=":C('ACTIVITY')" id="activity">-->
                    <!--{:hook('activity_form',array('key'=>$key,'goods_id'=>$info['id'],'activity'=>$info['activity']))}-->
                <!--</volist>-->
            <!--</div>-->

        <!--</div>-->

        <!--<div class="col-sm-2">-->
            <!--<p class="form-control-static">勾选活动并完整填写活动数据</p>-->
        <!--</div>-->
    <!--</div>-->

    <div class="form-group">
        <label class="col-sm-2 control-label" for="subtitle">商品卖点：</label>
        <div class=" col-sm-6">
            <textarea id="subtitle" name="subtitle" type="text" class="form-control" placeholder=""><if condition="isset($info['subtitle'])">{$info.subtitle}</if></textarea>
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">150字以内</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="price">一口价：</label>
        <div class=" col-sm-6">
            <input id="price" name="price" type="text" class="form-control" placeholder="" value="<if condition="isset($info['price'])">{$info.price}</if>">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">1.00</p>
        </div>
    </div>


    {:hook("admin_goods_form",$info)}
    <div class="form-group">
        <label class="col-sm-2 control-label" for="stock">商品数量：</label>
        <div class=" col-sm-6">
            <input id="stock" name="stock" type="number" class="form-control" placeholder="" value="<if condition="isset($info['stock'])">{$info.stock}</if>">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">1</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="multimage">商品图片：</label>
        <div class=" col-sm-6 ">


            <div id="multimageUpload">

                <ul id="multimageTab" class="nav nav-tabs">
                    <li class="active"><a href="#multimagetab1" data-toggle="tab">本地上传</a></li>
                    <!--<li><a href="#multimagetab2" data-toggle="tab">图片空间</a></li>-->
                </ul>
                <div id="multimageTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="multimagetab1">
                        <div class="form-group">
                            <div class="center">
                                <input id="multimage" type="file" style="display:inline;" accept="image/gif, image/jpeg, image/png" >
                                <input name="multimage" type="text" style="display:inline;display:none;" value="<if condition="isset($info['multimage'])">{$info.multimage}</if>">
                            </div>

                            <div class="center">
                                <p class="form-control-static">提示：本地上传图片大小不能超过3M。</p>
                                <p class="form-control-static">本类目下您最多可以上传 5 张图片。</p>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="multimage-gallery">
                    <!--<p class="form-control-static">700*700 以上的图片可以在商品详情页主图提供图片放大功能</p>-->
                    <ul class="nav">
                        <for start="0" end="5" name="i">
                            <li class="<eq name="i" value="0">primary</eq> <if condition="(isset($info['images'][$i]['path']) && (strlen($info['images'][$i]['path']) gt 5))" >has-img" data-img="{$info['images'][$i]['id']}"<else />" data-img="{$info['images'][$i]['id']}"</if> data-index="{$i+1}" >
                            <div class="preview">
                                <img src="<if condition="isset($info['images'][$i]['path'])">{$info['images'][$i]['path']}</if>"/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                            </li>
                        </for>
                    </ul>
                </div>
            </div>
            <script type="application/javascript">
                $(function(){
                    /**
                     * 商品图片上传
                     */
                    $("#multimage").uploadify({
                        'swf'      : '/static/plugin/uploadify/uploadify.swf',
                        'uploader' : '{:U("Picture/upload")}',
                        "buttonText"      : "上传图片",
                        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                        "onUploadSuccess" :uploadPicture
                        // Put your options here
                    });
                    function uploadPicture(file,data){
                        trace('上传成功');
                        var data = $.parseJSON(data);
                        trace(data);
                        if(data.status){
                            trace('上传成功');
                            var pics = $(".multimage-gallery ul li");
                            trace('共'+pics.length+'个图片容器');
                            for(var i=0; i<pics.length; i++){
                                if($(pics[i]).attr('data-img') == data.id){
                                    trace('已存在图片');
                                    return;
                                }
                            }
                            for(var i=0; i<pics.length; i++){
                                var img = $(pics[i]).find('div.preview').find('img');
                                var src = $(img).attr('src');
                                if(src.length<10){
                                    trace('第'+i+'图片容器增加src');
                                    trace(img);
                                    $(img).attr('src',data.path);
                                    $(pics[i]).attr('data-img',data.id);
                                    checkImg(pics[i]);
                                    break;
                                }else{
                                    trace('第'+i+'图片容器有src='+src);
                                }
                            }
                        }else{
                            trace('上传失败');
                        }
                    }

                    //左移
                    $(document).on('click','.m-left',function(){
                        trace('触发左移按钮');
                        var li = $(this).parent('.operate').parent('li');
                        var pre = $(li).prev('li');
                        var nex = $(li).next('li');
                        if($(pre).data('index')>=1){
                            trace('上一个索引是index= '+$(pre).data('index')+' 执行交换');
                            var src_tmp = $(pre).find('div.preview').find('img').attr('src');
                            var dat_tmp = $(pre).attr('data-img');
                            var src_now = $(li).find('div.preview').find('img').attr('src');
                            var dat_now = $(li).attr('data-img');
                            $(pre).find('div.preview').find('img').attr('src',src_now);
                            $(pre).attr('data-img',dat_now);
                            $(li).find('div.preview').find('img').attr('src',src_tmp);
                            $(li).attr('data-img',dat_tmp);
                            trace('交换完毕');
                            checkImg(li);
                            checkImg(pre);
                        }else{
                            trace('不执行交换');
                        }
                    });
                    //右移
                    $(document).on('click','.m-right',function(){
                        trace('触发左移按钮');
                        var li = $(this).parent('.operate').parent('li');
                        var pre = $(li).prev('li');
                        var nex = $(li).next('li');
                        if($(nex).data('index')>=1){
                            trace('下一个索引是index= '+$(pre).data('index')+' 执行交换');
                            var src_tmp = $(nex).find('div.preview').find('img').attr('src');
                            var dat_tmp = $(nex).attr('data-img');
                            var src_now = $(li).find('div.preview').find('img').attr('src');
                            var dat_now = $(li).attr('data-img');
                            $(nex).find('div.preview').find('img').attr('src',src_now);
                            $(nex).attr('data-img',dat_now);
                            $(li).find('div.preview').find('img').attr('src',src_tmp);
                            $(li).attr('data-img',dat_tmp);
                            checkImg(li);
                            checkImg(nex);
                            trace('交换完毕');
                        }else{
                            trace('不执行交换');
                        }
                    });
                    //删除
                    $(document).on('click','.remove',function(){
                        var li = $(this).parent('.operate').parent('li');
                        $(li).find('div.preview').find('img').attr('src','');
                        $(li).attr('data-img','');
                        checkImg(li);
                    });
                    function checkImg(li){
                        var src = $(li).find('div.preview').find('img').attr('src');
                        if(src.length>10){
                            $(li).addClass('has-img');
                        }else{
                            $(li).removeClass('has-img');
                        }
                        var pics = $(".multimage-gallery ul li");
                        var val = '';
                        for(var i=0; i<pics.length; i++){
                            if($(pics[i]).attr('data-img')>=1){
                                val = val + $(pics[i]).attr('data-img')+ ',';
                            }
                        }
                        $("input[name='multimage']").val(val);
                        trace('multimage = '+$("input[name='multimage']").val());


                    }
                });
            </script>


        </div>

        <div class="col-sm-2">
            <p class="form-control-static"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label" for="content">商品详情：</label>
        <div class=" col-sm-6" >
            <!-- 加载编辑器的容器 -->
            <script id="content" name="content" type="text/plain">
                {$info.content}
            </script>
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                var ue = UE.getEditor('content', {
                            toolbars: [
                                ['fullscreen', 'source', 'undo','redo','fontsize',  'bold', 'italic', 'underline', 'fontborder', 'strikethrough','backcolor','forecolor','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',  'removeformat','simpleupload','link','unlink','inserttable','deletetable']
                            ],
                            autoFloatEnabled: true,
                        }
                );
            </script>


        </div>
        <div class="col-sm-2">
            <p class="form-control-static">如果编辑区太小，建议点击"全屏"按钮</p>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-2 control-label" for="content_attribute">商品属性：</label>
        <div class=" col-sm-6">
            <!-- 加载编辑器的容器 -->
            <script id="content_attribute" name="content_attribute" type="text/plain">
                {$info.content_attribute}
            </script>
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                var ue2 = UE.getEditor('content_attribute', {
                            toolbars: [
                                ['fullscreen', 'source', 'undo','redo','inserttable','deletetable','fontsize',  'bold', 'italic', 'underline', 'fontborder', 'strikethrough','backcolor','forecolor','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify',  'removeformat','link','unlink']
                            ],
                            autoFloatEnabled: true,
                        }
                );
            </script>


        </div>
        <div class="col-sm-2">
            <p class="form-control-static">请先点击面板上的第四个图标添加表格，信息会显示在商品的属性位置上</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="price">上架时间：</label>
        <div class=" col-sm-6">
            <input id="pubstart" name="pubstart" type="datetime-local" class="form-control" placeholder="" value="<if condition="isset($info['pubstart']) and $info['pubstart'] gt 0">{:date("Y-m-d",$info['pubstart'])}T{:date("H:i",$info['pubstart'])}</if>">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">若不填写则立即上架</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="price">下架时间：</label>
        <div class=" col-sm-6">
            <input id="pubend" name="pubend" type="datetime-local" class="form-control" placeholder="" value="<if condition="isset($info['pubend']) and $info['pubend'] gt 0">{:date("Y-m-d",$info['pubend'])}T{:date("H:i",$info['pubend'])}</if>">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">上架时间填写时下架时间必须填写，否则不可填写</p>
        </div>
    </div>
    <div style="display:none;">
        <input name="id" value="<if condition="isset($info['id'])">{$info.id}</if>">

    </div>

    <button type="submit" class="btn btn-default" style="position: fixed;bottom: 30px;" data-url="{:U('Goods/update')}">发布</button>
    <!--<button type="submit" class="btn btn-default" style="position: fixed;bottom: 30px;" data-url="{:U('Goods/copy')}">复制</button>-->
    <script>
        $(".btn").on("click",function(){
            var url = $(this).data("url");
            if(!url){
                return false;
            }
            console.log(url);
            $(".form")
                    .attr("action", url)
                    .submit();
            return false;
        });
    </script>

</form>